import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { Table, TableBody, TableCell, TableHead, TableRow, Paper, Button } from '@mui/material';

function Schedule() {
  const [schedules, setSchedules] = useState([]);

  useEffect(() => {
    fetchSchedules();
  }, []);

  const fetchSchedules = async () => {
    try {
      const response = await axios.get('api/schedules/');
      setSchedules(response.data);
    } catch (error) {
      console.error('Ошибка при загрузке графика:', error);
    }
  };

  return (
    <Paper>
      <Table>
        <TableHead>
          <TableRow>
            <TableCell>Врач</TableCell>
            <TableCell>Дата</TableCell>
            <TableCell>Начало смены</TableCell>
            <TableCell>Конец смены</TableCell>
            <TableCell>Отработанные часы</TableCell>
            <TableCell>Перерыв</TableCell>
            <TableCell>Утверждено</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {schedules.map((schedule) => (
            <TableRow key={schedule.id}>
              <TableCell>{schedule.radiologist}</TableCell>
              <TableCell>{schedule.date}</TableCell>
              <TableCell>{schedule.shift_start}</TableCell>
              <TableCell>{schedule.shift_end}</TableCell>
              <TableCell>{schedule.worked_hours}</TableCell>
              <TableCell>{schedule.break_duration}</TableCell>
              <TableCell>{schedule.is_approved ? 'Да' : 'Нет'}</TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </Paper>
  );
}

export default Schedule;